<template>
  <div class="header">
    <van-nav-bar left-text="返回" left-arrow>
      <template #left>
        <van-icon name="envelop-o" />
        <van-icon name="search" />
      </template>
      <template #title>
        SHAREin
      </template>
      <template #right>
        <van-icon name="like-o" />
        <van-badge :content="num">
          <van-icon name="cart-circle-o" />
        </van-badge>
      </template>
    </van-nav-bar>
  </div>
</template>
<script>
import { mapState } from "vuex"

export default {
  name: "Header",
  computed: {
    ...mapState('card', ['num'])
  },
}
</script>
<style lang="scss" scoped>
.header {
  ::v-deep .van-icon {
    &:last-child {
      margin-left: 10px;
    }
  }
}
</style>